<script lang="ts" setup>
import { Person } from '../types/person'
// 定义接收的数据及其类型
// ts的基本类型小写

// 这种默认值，写法用得比较少
// withDefaults(
//   defineProps<{
//     name: string
//     age: number
//     isMan: boolean
//     hobby: string[]
//     address: object
//   }>(),
//   {
//     age: 100
//   }
// )

// ts中，根据返回值，拿到传递过来的数据，传递过来的数据不要去更改，要遵循单向数据流
// const props = defineProps<{
//   name: string
//   age: number
//   isMan: boolean
//   hobby: string[]
//   address: object
// }>()

// console.log('---props---', props)

const {
  name,
  age = 100,
  isMan,
  hobby,
  address
} = defineProps<{
  name: string
  age?: number
  isMan: boolean
  hobby: string[]
  address: object
}>()

// ts中定义emit
// interface Person {
//   name: string
//   money: number
// }

const emits = defineEmits<{
  /**
   * 参数1：e：自定义事件名字
   * 参数2：值的类型（受到它的约束）
   * 返回值，代表没有返回值
   */
  (e: 'myevent', value: Person): void
}>()

const sendValue = () => {
  emits('myevent', { name: '陈龙', money: 1000000000 })
}
</script>

<template>
  <div class="">
    <p>{{ name }} {{ age }} {{ isMan ? '男' : '女' }}</p>
    <p>爱好：{{ hobby }}</p>
    <p>地址：{{ address }}</p>
    <p>
      <button @click="sendValue">传值给父组件</button>
    </p>
  </div>
</template>

<style scoped></style>
